<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<body>

<div class="panel">
    <div class="panel-body">

        <div class="alert alert-primary" th:utext="${targetDesc?.content}">

        </div>

        <div class="row">
            <input name="evaluateContent" class="form-control" placeholder="反对内容" autocomplete="off" />
            <div class="pad-btm bord-btm clearfix" style="margin-top: 5px">
                <button id="evaluateSubmit" class="btn btn-sm btn-primary pull-right" type="button" th:data-content="${targetDesc?.id}" data-type="submit"><i class="fa fa-share"></i> 发布</button>
            </div>
        </div>

        <div class="mar-top pad-top">
            <div id="evaluateDivList">

                <!--<div class="media pad-btm">-->
                    <!--<a class="media-left" href="#"><img class="img-circle img-xs" alt="Profile Picture" src="img/profile-photos/7.png"></a>-->
                    <!--<div class="media-body">-->
                        <!--<div>-->
                            <!--<a href="#" class="btn-link text-semibold media-heading box-inline">Lucy Moon</a>-->
                            <!--<small class="text-muted pad-lft">2 Hours ago</small>-->
                        <!--</div>-->
                        <!--<span>Duis autem vel eum iriure dolor in vulputate ?</span>-->
                    <!--</div>-->
                <!--</div>-->

            </div>

            <div class="text-center">
                <a href="javascript:void(0)" class="btn btn-trans text-semibold" id="surplusLoadBtn">0 加载更多</a>
                <span class="text-semibold" id="surplusLoadOver" style="display: none">已全部加载完毕</span>
            </div>

        </div>

    </div>
</div>

</body>

<script id="evaluate-list-temp" type="text/x-jquery-tmpl">

     <div class="media pad-btm" id="${id}">
         <a class="media-left" href="javascript:void(0)"><img class="img-circle img-xs" alt="${creatorName}" src="${headerImg}"></a>
         <div class="media-body">
             <div>
                 <a href="javascript:void(0)" class="btn-link text-semibold media-heading box-inline">${creatorName}</a>
                 <small class="text-muted pad-lft">${createTime}</small>
             </div>
             <span>${content}</span>
         </div>
     </div>

</script>

<script th:inline="javascript">

    var p = 1;

    $(function(){
        load_evaluate_list(p);
    });

    //发布评论
    $("#evaluateSubmit").on("click", function(){
        var $btn = $(this);
        var id = $btn.attr("data-content");
        var msg = $("input[name='evaluateContent']").val();
        if(isNull(msg)){
            __toastr_warning("请填写评论内容");
            $("input[name='evaluateContent']").focus();
            return false;
        }

        __button_loading("evaluateSubmit");
        __ajax_post(ctx + "targetDescEvaluate/save", {id : id, content : msg}, function(data){
            __button_reset("evaluateSubmit");
            __toastr(data);
            if(data.state === 1){
                $("input[name='evaluateContent']").val("");
                p = 1;
                load_evaluate_list(p);
            }
        })
    });

    //加载评论列表
    function load_evaluate_list(p){
        if(isNull(p)){
            p = 1;
        }
        __panelOverlay_show("evaluateDivList");
        __ajax_get(ctx + "targetDescEvaluate/list", {id : [[${targetDesc?.id}]], p : p}, function(data){
            __panelOverlay_hide("evaluateDivList");
            if(p === 1) $("#evaluateDivList").empty();
            $("#evaluate-list-temp").tmpl(data.dataRows).appendTo("#evaluateDivList");
            var surplus = data.records - (data.page * data.rows)
            $("#surplusLoadBtn").text(surplus + " 加载更多");
            if(surplus <= 0){
                $("#surplusLoadBtn").hide();
                $("#surplusLoadOver").show();
            }else{
                $("#surplusLoadBtn").show();
                $("#surplusLoadOver").hide();
            }
        })
    }

    //加载更多评论
    $("#surplusLoadBtn").on("click", function(){
        load_evaluate_list(++p);
    });

</script>

</html>